<template>
  <div class="height-100-per">
    <div class="b-list">
      <Draggable class="height-100-per" :list="rowData" group="row" :options="{delay:1000,animation:200}" @change="changeRow">
        <div class="b-row" v-for="d in rowData">
          <div class="b-inner">
            <div class="b-title">
              <a-icon @click="addCard(d.id)" type="plus" style="float: right;cursor: pointer" />
              <span style="float: right">{{d.item.length}}</span>
              {{d.name}}
            </div>
            <div class="b-cards">
              <Draggable class="height-100-per padding-10-px padding-top-0px" style="overflow-y: auto" :list="d.item" group="card" :options="{delay:10,animation:200}" @change="changeCard">
                <a-card class="list-item margin-top-10-px padding-5-px" style="border: 1px solid #e5e5e5;" v-for="(c,index) in d.item" :key="index">
                  {{c.name}}
                </a-card>
              </Draggable>
            </div>
          </div>
        </div>
      </Draggable>
    </div>
  </div>
</template>

<script>
  import {Card, Icon} from 'ant-design-vue'
  import Draggable from 'vuedraggable2'

  const rowData = [
    {id: 1, name: "test1", item: [{name: "111"}, {name: "2222"}]},
    {id: 2, name: "test2", item: [{name: "333"}, {name: "4444"}]},
    {id: 3, name: "test3", item: [{name: "5555"}, {name: "6666"}]},
    {id: 4, name: "test4", item: []}
  ];

  export default {
    name: "Board",
    components: {
      ACard: Card,
      AIcon: Icon,
      Draggable
    },
    data() {
      return {
        rowData
      }
    },
    methods:{
      changeCard(){
        console.log(this.rowData);
      },
      changeRow(){
        console.log(this.rowData);
      },
      addCard(id){
        for (let r of this.rowData){
          if(r.id===id){
            r.item.push({name:"ttttttt"});
          }
        }
        console.log(this.rowData)
      }
    }
  }
</script>

<style scoped>
  .b-list {
    padding: 12px 8px;
    height: calc(100vh - 120px);
    min-height: 475px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .b-list .b-row {
    padding: 0 8px;
    min-width: 320px;
  }

  .b-row {
    width: 25%;
    height: 100%;
    max-width: 400px;
    min-width: 300px;
    display: inline-block;
    padding-right: 1rem;
    white-space: normal;
    vertical-align: top;
  }

  .b-row .b-inner {
    height: 100%;
    font-size: 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    position: relative;
  }

  .b-title {
    line-height: 15px;
    padding: 8px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #e5e5e5;
  }

  .b-cards {
    height: calc(100% - 32px);
  }
</style>